import React, { useEffect, useState } from 'react'
import { Form, Select, Input, InputNumber, Switch, message } from 'antd'
const { Option } = Select
import request from '@/utils/request'
export default (props: any) => {
    const { getList, id, close, form } = props


    const [specList, setSpecList] = useState([]);
    const [brandList, setBrandList] = useState([]);
    const onFinish = (values: any) => {
        request(`/goods/genre/${id}`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            if (result.code !== 200) {
                message.warning(result.message)
                return
            }
            message.success(result.message)
            close()
            getList()
        })
    }


    useEffect(() => {
        request(`/goods/spec-list`).then((result) => {
            setSpecList(result.data.list);
        })
        request(`/goods/brand-list`).then((result) => {
            setBrandList(result.data.list);
        })
    }, [])
    return (
        <Form
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 20 }}
            onFinish={onFinish}
            form={form}
            initialValues={{ enable: true }}
        >
            <Form.Item
                label="类型名称"
                name="title"
                required
                rules={[{ required: true, message: '请输入类型名称' }]}
            >
                <Input placeholder="请输入类型名称" />
            </Form.Item>
            <Form.Item
                label="排序"
                name="sort"
            >
                <InputNumber />
            </Form.Item>

            <Form.Item
                label="是否启用"
                name="enable"
                valuePropName="checked"
            >
                <Switch />
            </Form.Item>
            <Form.Item label="关联规格"
                name="spec_ids"
            >
                <Select
                    mode="multiple"
                    placeholder="请选择要关联的规格"
                >
                    {
                        specList.map((item: any) =>
                            <Option value={item.id} key={item.id}>
                                {item.title}
                            </Option>)
                    }

                </Select>
            </Form.Item>
            <Form.Item label="关联品牌" name="brand_ids">
                <Select
                    mode="multiple"
                    placeholder="请选择要关联的品牌"
                >

                    {
                        brandList.map((item: any) =>
                            <Option value={item.id} key={item.id}>
                                {item.title}
                            </Option>)
                    }
                </Select>
            </Form.Item>
        </Form>
    );
}